import { Button, Checkbox, Form, Input, Switch, Select, Space, Radio } from "antd";
import { MinusCircleOutlined, PlusOutlined } from "@ant-design/icons";
import { uniqueId } from "lodash";
import { SpanWidth } from "@/pages/Drag/Enums";

const CModal = () => {
  const [form] = Form.useForm();
  const onRadioClick = (key: number) => {
    console.log(key)
    console.log(form.getFieldValue('checked'))
    if (form.getFieldValue('checked') === key) {
      form.setFieldsValue({ checked: '' })
    }
  }
  return (
    <Form
      form={form}
      layout="vertical"
      initialValues={{
        maskClosable: true,
        mask: true,
        showCancelBtn: true,
        showOkBtn: true,
        cancelText: '取消',
        okText: '确认',
        closable: true,
        contentType: 'custom'
      }}
      onValuesChange={(changeValue, values) => {
        if (Object.keys(changeValue)[0] === 'inputType') {
          form.setFieldsValue({ checked: '' })
          console.log(Object.keys(changeValue))
        }
        console.log(values)
      }}
    >
      {
        ({ showCancelBtn, showOkBtn, contentType }) => (
          <>
            <Form.Item label='标题' name='inputType' >
              <Input />
            </Form.Item>
            <Form.Item label="是否展示遮罩" name="mask" valuePropName="checked">
              <Switch />
            </Form.Item>
            <Form.Item label="点击蒙层是否允许关闭" name="maskClosable" valuePropName="checked">
              <Switch />
            </Form.Item>
            <Form.Item label="是否显示取消按钮" name="showCancelBtn" valuePropName="checked">
              <Switch />
            </Form.Item>
            {showCancelBtn && <Form.Item label="取消按钮文字" name='cancelText'>
              <Input />
            </Form.Item>}
            <Form.Item label="是否显示确认按钮" name="showOkBtn" valuePropName="checked">
              <Switch />
            </Form.Item>
            {showOkBtn && <Form.Item label="确认按钮文字" name='okText'>
              <Input />
            </Form.Item>}
            <Form.Item label="是否显示右上角的关闭按钮" name='closable' valuePropName="checked">
              <Switch />
            </Form.Item>
            <Form.Item label="弹框内容" name='contentType'>
              <Select options={[{
                value: 'form',
                label: '关联表单'
              }, {
                value: 'custom',
                label: '自定义'
              }]} />
            </Form.Item>
            {contentType === 'custom' && <Form.Item label="弹框内容" name='content'>
              <Input.TextArea />
            </Form.Item>}
            <Form.Item label="字段宽度" name='modalWidth'>
              <Radio.Group
                buttonStyle="solid">
                <Radio.Button value={SpanWidth.W5}>1/4</Radio.Button>
                <Radio.Button value={SpanWidth.W4}>1/3</Radio.Button>
                <Radio.Button value={SpanWidth.W3}>2/4</Radio.Button>
                <Radio.Button value={SpanWidth.W2}>3/4</Radio.Button>
                <Radio.Button value={SpanWidth.W1}>整行</Radio.Button>
              </Radio.Group>
            </Form.Item>
          </>
        )
      }
    </Form >
  )
}

export default CModal;


